<template>
	<view class="content">
		<navBar title="全民砍价" :change="scrollChange"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/bargainirg_bg.png" mode="widthFix" />
		</view>
		<!-- <view class="act-rule">规则</view> -->
		<view class="container">
			<view class="list-top flex justify-center align-center">
				<text class="cuIcon-title" style="font-size:24upx"></text>
				<text class="cuIcon-title" style="font-size:30upx"></text>
				<text class="cuIcon-title" style="font-size:36upx"></text>
				<text v-if="list.len !== 0">正在进行中</text>
				<text v-if="list.len == 0">已结束</text>
				<text class="cuIcon-title" style="font-size:36upx"></text>
				<text class="cuIcon-title" style="font-size:30upx"></text>
				<text class="cuIcon-title" style="font-size:24upx"></text>
			</view>
			<view class="list flex">
				<view class="list-img flex justify-center align-center">
					<image :src="list.productPic" mode="widthFix" />
				</view>
				<view class="list-info">
					<view class="info-title text-cut">已有{{list.total - list.len}}人帮忙，仅差{{list.len}}人</view>
					<view class="progress">
						<view class="cu-progress round xs">
							<view class="bg-red" :style="'width:'+ (list.total - list.len)/list.total * 100+'%'"></view>
						</view>
					</view>
					<view class="judge-info flex align-center">
						<image :src="list.memberIcon" />
						<text>{{list.nickName}}</text>
						<view>发起人</view>
					</view>
					<!-- <view class="help-prize">预计您可获得帮忙奖4元</view> -->
					<view class="btn" @click="open">帮他砍价</view>
				</view>
			</view>
			<scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in navList" :key="index"
					 @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
			<view class="record-list flex justify-between" v-for="(item,index) in objList" :key="index">
				<view class="list-info flex">
					<image :src="item.icon" />
					<view class="info-content">
						<view class="info">
							<view class="name">{{item.objName}}</view>
						</view>
						<view class="packet">
							<image src="/static/icon/icon_red_packet.png" />
							<view class="packet-text">获得帮忙奖{{item.price}}元</view>
						</view>
					</view>
				</view>
				<view class="list-right">
					<view class="list-price">{{item.price}}</view>
					<text>帮忙砍掉(元)</text>
				</view>
			</view>
		</view>
		<!-- 砍价成功弹框 -->
		<view class="weChat_popups" v-show="watchShow == 1">
			<view class="popups_bg" @click="watchShow =0"></view>
			<view class="popups_body">
				<image src="../../static/bg/packet_popup.png"></image>
				<view class="center">
					<view style="font-size: 50upx;font-weight: 700;margin-top: 20upx;">恭喜您</view>
					<!-- <view style="font-size: 30upx;margin-top: 20upx;">以帮助发起人砍价3元</view> -->
					<view style="font-size: 35upx;font-weight: 700;margin-top: 40upx;">
						<!-- 您已获得帮忙奖 -->
					</view>
					<view> <text style="font-size: 100upx;font-weight: 700;">{{res}}</text> </view>
				</view>
				<view class="goShuijing" @click="goShuijing">
					立即查看
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import navBar from "@/components/header-nav";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniLoadMore,
			navBar,
			uniPopup
		},
		data() {
			return {
				watchShow: 0,
				headerHeight: 0,
				scrollChange: false,
				// navList: ['砍价记录', '砍价专区'],
				navList: ['砍价记录'],
				TabCur: 0,
				scrollLeft: 0,
				oid: 0,
				pid: 0,
				num: 0,
				list: {},
				objList: [],
				res: ''
			};
		},
		onLoad(opation) {
			//console.log('砍价接收参数', opation)
			this.oid = opation.oid;
			this.pid = opation.pid;
			
			if (uni.getStorageInfoSync('biaoshi') == this.oid) {
				//console.log(uni.getStorageInfoSync('biaoshi'))
				uni.navigateBack({
					data: 1
				})
			}
			
			// 浏览器进入 this.oid != 0
			if (this.oid != 0) { 
				uni.setStorageSync('biaoshi', this.oid)
			}
		},
		async onShow() {
			this.getUserList()
			
		},
		onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
		},
		onPageScroll(e) {
			if (e.scrollTop > this.headerHeight) {
				this.scrollChange = true
			} else {
				this.scrollChange = false
			}
		},
		methods: {
			async getUserList() {
				let params = {
					orderId: this.oid,
					productId: this.pid
				}
				let res = await Api.apiCall('get', 'single/oms/getRedPacketInfo', params);
				this.list = res.product;
				this.objList = res.list
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			async open() {
				let memberId = uni.getStorageSync('userInfos').id;
				let params = {
					memberId: memberId,
					orderId: this.oid,
					productId: this.pid,
				}
				let res = await Api.apiCall('post', 'single/oms/getRedPacket', params);
				//console.log('砍价返回数据', res)
				this.res = res;
				if (res == undefined || res == null) {
					uni.showToast({
						icon: 'none',
						title: '砍价失败!'
					})
				} else {
					this.getUserList();
					this.watchShow = 1;
				}
			},
			goShuijing() {
				this.watchShow = 0;
				uni.navigateTo({
					url: '/pagesU/user/deposit'
				})
				// uni.reLaunch({
				// 	url:'/pagesU/user/deposit'
				// });
			}
		},
		onHide() {
			// uni.setStorageSync('sanfang','')
		}
		
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		min-height: 100vh;
		position: relative;

		.header-bg {
			width: 100%;
			font-size: 0;

			image {
				width: 100%;
			}
		}

		.container {
			background: linear-gradient(to bottom, #FC57AB, #fff);
			padding: 20upx 20upx 90upx;

			.list-top {
				background: linear-gradient(135deg, rgba(251, 201, 0, 1) 0%, rgba(248, 132, 0, 1) 100%);
				padding: 16upx 0;
				border-radius: 20px 20px 0px 0px;
				color: #fff;
				line-height: 34upx;

				text {
					padding: 0 4upx;
				}
			}

			.list {
				padding: 20upx;
				background: #fff;
				margin-bottom: 40upx;
				border-radius: 0px 0px 20px 20px;
				box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.06);

				.list-img {
					width: 280upx;
					height: 280upx;
					border-radius: 14upx;
					border: 1px solid rgba(245, 245, 245, 1);

					image {
						width: 100%;
					}
				}

				.list-info {
					width: calc(100% - 300upx);
					margin-left: 20upx;

					.info-title {
						max-width: 100%;
						font-size: 26upx;
						color: #333;
						font-weight: bold;
					}

					.progress {
						padding-bottom: 10upx;
					}

					.judge-info {
						image {
							width: 52upx;
							height: 52upx;
							border-radius: 52upx;
						}

						text {
							font-size: 32upx;
							color: #666;
							padding: 0 10upx;
							line-height: 32upx;
							font-weight: bold;
						}

						view {
							height: 34upx;
							width: 92upx;
							line-height: 32upx;
							text-align: center;
							border: 1upx solid #F94242;
							border-radius: 20upx;
							border-top-left-radius: 0;
							font-size: 20upx;
							color: #F94242;
						}
					}

					.help-prize {
						margin-top: 10upx;
						font-size: 24upx;
						font-weight: bold;
						color: #F94242;
						padding: 4upx 6upx;
						border: 1upx solid #F94242;
						display: inline-block;
					}

					.btn {
						background: linear-gradient(to right, #FF7777, #FF1D1D);
						box-shadow: 0px 3upx 10upx 0px rgba(248, 141, 0, 0.64);
						border-radius: 44upx;
						width: 360upx;
						height: 88upx;
						color: #fff;
						line-height: 88upx;
						font-size: 36upx;
						text-align: center;
						margin-top: 16upx;
						font-weight: bold;
						box-shadow: 6upx 6upx 12upx 0upx rgba(0, 0, 0, 0.06);
						margin-bottom: 10upx;
					}
				}
			}

			.nav .cu-item {
				font-size: 32upx;
				color: #F94242;
				font-weight: bold;
				margin: 0;
			}

			.nav .cu-item.cur {
				color: #fff;
				font-size: 36upx;
				border: 0;
				background: linear-gradient(to top, #FF7777, #FF1D1D);
				border-radius: 20upx 20upx 0px 0px;
			}

			.nav {
				margin-bottom: 20upx;
			}

			.record-list {
				margin-top: 30upx;
				padding: 20upx;
				background: #fff;
				margin-bottom: 20upx;
				border-radius: 20upx;
				box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.06);

				.list-info {
					image {
						width: 120upx;
						height: 120upx;
					}

					.info-content {
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info {
							display: flex;
							align-items: center;

							.name {
								font-size: 36upx;
								font-weight: bold;
								color: #333;
							}

							.tag {
								margin-left: 10upx;
								font-size: 20upx;
								width: 120upx;
								height: 36upx;
								background: linear-gradient(135deg, rgba(255, 213, 121, 1) 0%, rgba(255, 158, 25, 1) 100%);
								border-radius: 0px 16upx 16upx 16upx;
								text-align: center;
								line-height: 36upx;
								color: #fff;
							}
						}

						.packet {
							display: flex;
							align-items: center;

							image {
								width: 44upx;
								height: 44upx;
							}

							.packet-text {
								margin-left: 10upx;
								padding: 8upx 10upx;
								background: linear-gradient(135deg, rgba(255, 119, 119, 1) 0%, rgba(255, 29, 29, 1) 100%);
								border-radius: 6upx;
								color: #FFE199;
								font-size: 24upx;
							}
						}
					}
				}

				.list-right {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					font-size: 20upx;
					color: #F94242;

					.list-price {
						font-size: 42upx;
						font-weight: bold;
					}
				}
			}
		}

		.popup-wrap {
			position: relative;

			image {
				width: 600upx;
				height: 700upx;
			}

			.popup-content {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				padding: 60upx 40upx 80upx;

				.content-text {
					text-align: center;
					color: #F94242;

					.title {
						font-size: 46upx;
						font-weight: bold;
						padding-bottom: 20upx;
					}

					.text {
						font-size: 24upx;
					}

					.help-text {
						margin-top: 70upx;
						font-size: 32upx;
					}

					.help-price {
						padding-top: 30upx;
						font-size: 80upx;
						font-weight: bold;

						text {
							font-size: 32upx;
						}
					}
				}

				.popup-btn {
					margin-top: 140upx;
					width: 100%;
					font-size: 36upx;
					font-weight: bold;
					border-radius: 44upx;
					background: linear-gradient(180deg, rgba(255, 245, 106, 1) 0%, rgba(255, 189, 52, 1) 81%, rgba(255, 220, 69, 1) 100%);
					box-shadow: 0px 0px 0px 8upx rgba(244, 50, 44, 1), 0px -6upx 0px 2upx rgba(255, 198, 36, 1);
					text-align: center;
					padding: 26upx 0;
					color: #F4322C;
				}
			}
		}
	}

	// 客服弹出框
	.weChat_popups {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;

		.popups_bg {
			z-index: 1000;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #000;
			opacity: 0.3;
		}

		.popups_body {
			z-index: 1001;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 600upx;
			height: 602upx;
			border-radius: 30upx;
			background-color: #FFFFFF;

			image {
				position: absolute;
				top: 100upx;
				height: 600upx;
			}

			.center {
				position: absolute;
				top: 0;
				width: 100%;
				text-align: center;
				color: red
			}

			.goShuijing {
				position: absolute;
				bottom: -50upx;
				width: 80%;
				text-align: center;
				margin: 0 10%;
				background-color: #FFF575;
				height: 90upx;
				line-height: 90upx;
				color: #F94242;
				font-size: 36upx;
				font-weight: 700;
				border-radius: 50upx;
				box-shadow: 0upx 0upx 8upx 1upx rgba(0, 0, 0, .2);
			}
		}
	}
</style>
